<template>
  <div>
    <div>
<van-nav-bar
  title="优惠活动"
  left-text="返回"
  right-text="按钮"
  left-arrow
  @click-left="onClickLeft"
  @click-right="onClickRight"
/>
 </div>
 <div>
  <van-dropdown-menu>
  <van-dropdown-item v-model="value1" :options="option1" />
  <van-dropdown-item v-model="value2" :options="option2" />
</van-dropdown-menu>
 </div>
<div class="wode">
   <ul>
    <li v-for="(v,i) in arr" :key="i"><img :src="v.img" alt="">
      <div>
      <h6>{{v.name}}</h6>
       <p class="p1">{{v.name1}}</p>
        <p class="p2">{{v.time}}</p>
      </div>
    
    </li>
   </ul>


</div>
  </div>
</template>

<script>
export default {
  methods: {
    onClickLeft() {
     this.$router.push("/homes")
    },
    onClickRight() {
      Toast('按钮');
    },
  },
   data() {
    return {
      value1: 0,
      value2: 'a',
      option1: [
        { text: '全部商品', value: 0 },
        { text: '新款商品', value: 1 },
        { text: '活动商品', value: 2 },
      ],
      option2: [
        { text: '默认排序', value: 'a' },
        { text: '好评排序', value: 'b' },
        { text: '销量排序', value: 'c' },
      ],
      arr:[{
          img:"./homes/a1.png", name:"刷装修分期卡，想多重66砾",
          name1:"刷修装修分期卡，想多重66", time:"2022/07/08-2202/12/32"
      },
      {
          img:"./homes/a2.png", name:"刷装修分期卡，想多重66砾",
          name1:"刷修装修分期卡，想多重66", time:"2022/07/08-2202/12/32"
      },
      {
          img:"./homes/a1.png", name:"刷装修分期卡，想多重66砾",
          name1:"刷修装修分期卡，想多重66", time:"2022/07/08-2202/12/32"
      },
       {
          img:"./homes/a1.png", name:"刷装修分期卡，想多重66砾",
          name1:"刷修装修分期卡，想多重66", time:"2022/07/08-2202/12/32"
      },
       {
          img:"./homes/a1.png", name:"刷装修分期卡，想多重66砾",
          name1:"刷修装修分期卡，想多重66", time:"2022/07/08-2202/12/32"
      },
       {
          img:"./homes/a1.png", name:"刷装修分期卡，想多重66砾",
          name1:"刷修装修分期卡，想多重66", time:"2022/07/08-2202/12/32"
      },
       {
          img:"./homes/a1.png", name:"刷装修分期卡，想多重66砾",
          name1:"刷修装修分期卡，想多重66", time:"2022/07/08-2202/12/32"
      },]
    };
  
      

    
  },
}
</script>

<style lang="less"  scoped>
  .wode{
    width: 100%;
     ul{
      width: 92%;
      margin: auto;
      li{
        padding:  .1rem 0;
        display: flex;
        width: 100%;
        height: .9rem;
        border-bottom:.01rem solid  pink ;
        justify-content: space-between;
        img{
          width:30% ;
          height: .9rem;
          display: block;
        }
        div{
          width: 65%;
          height: .9rem;


           h6{
          font-size: .16rem;

        }
        .p1{
          font-size: .14rem;
        }
        .p2{
          font-size: .08rem;
          color:#3189d9 ;
          margin-top: .37rem;
        }
        }
       
      }
     }
  }
</style>